<script lang="ts" setup name="AppMenuTreeTable">
import { ref, reactive, onMounted, nextTick } from "vue";
import { CirclePlus, Edit, Delete } from "@element-plus/icons-vue";
import appMenuServiceApi from "@/api/modules/org/bean/app-menu";
import { SYSTEM_CONFIG } from "@/config/system";
import AppMenuFormDialog from "./app-menu-form-dialog.vue";
import { ElMessage, ElMessageBox } from "element-plus";
const emit = defineEmits<{
  (e: "add-items"): void;
}>();
const ElTableRef = ref();

const AppMenuTreeTableState = reactive({
  tableData: [] as any[],
  //加载表格数据
  loadTreeData: () => {
    appMenuServiceApi.queryList(null, { appId: SYSTEM_CONFIG.APP_ID }).then(res => {
      AppMenuTreeTableState.tableData = AppMenuTreeTableState.handleMenuTree(res.data);
    });
  },
  //序号
  indexMethod: (index: number) => index + 1,
  //新增事件
  onAddButtonClick: (row: any) => {
    console.log(row);
    AppMenuTreeTableState.currentParentMenuId = row.menuId;
    AppMenuTreeTableState.currentMenuId = "";
    AppMenuTreeTableState.dialogVisible = true;
  },
  //修改事件
  onEditButtonClick: (row: any) => {
    AppMenuTreeTableState.currentParentMenuId = "";
    AppMenuTreeTableState.currentMenuId = row.menuId;
    AppMenuTreeTableState.dialogVisible = true;
  },
  //删除事件
  onDeleteButtonClick: (row: any) => {
    const pkList = [row.menuId + "," + SYSTEM_CONFIG.APP_ID];
    ElMessageBox.confirm("此操作将永久删除此菜单, 是否继续?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      lockScroll: false
    })
      .then(() => {
        appMenuServiceApi.saveMultiDelete(pkList).then(() => {
          ElMessage.success({ message: "菜单删除成功", type: "success" });
          AppMenuTreeTableState.loadTreeData();
        });
      })
      .catch(() => {
        ElMessage({ type: "info", message: "已取消删除" });
      });
  },
  //处理出树形数据
  handleMenuTree: (data: any[]) => {
    //获取首级菜单
    const menuTreeData = data.filter(item => item.parentMenuId == null);
    if (menuTreeData.length == 0) return [];
    menuTreeData.forEach(item => handleTreeData(item, data));
    return menuTreeData;
  },
  //当前菜单id 修改时使用
  currentMenuId: "",
  //当前菜单id 新增时赋值
  currentParentMenuId: "",
  /**显示表单dialog */
  dialogVisible: false,
  onSaveSuccess: () => {
    AppMenuTreeTableState.loadTreeData();
  },
  addItems: () => {
    emit("add-items");
  }
});

/**
 * 处理树形数据
 */
function handleTreeData(parentMneu: any, resourceData: any[]) {
  const childrenArr = resourceData.filter(item => item.parentMenuId == parentMneu.menuId);
  if (childrenArr && childrenArr.length > 0) {
    childrenArr.forEach(item => handleTreeData(item, resourceData));
    parentMneu.children = childrenArr;
  }
}

defineExpose({
  getCheckedNodes: () => ElTableRef.value.getCheckedNodes(),
  loadTreeData: () => AppMenuTreeTableState.loadTreeData()
});

onMounted(() => {
  AppMenuTreeTableState.loadTreeData();
});
</script>
<template>
  <jxtech-basic-card title="应用菜单">
    <template #operationSpace>
      <jxtech-button type="primary" @click="AppMenuTreeTableState.addItems" v-auth="'org:xtpz:cdgl:save'">
        快捷新增权限按钮
      </jxtech-button>
    </template>
    <el-table class="app-menu-tree-table" ref="ElTableRef" :data="AppMenuTreeTableState.tableData" row-key="menuId" border>
      <el-table-column align="center" type="index" label="序号" width="80px" :index="AppMenuTreeTableState.indexMethod" />
      <el-table-column prop="menuName" label="菜单名称" class="app-menu-tree-table-name" />
      <el-table-column align="center" label="操作" width="300px">
        <template #default="scope">
          <div class="app-menu-tree-table-control">
            <span @click="AppMenuTreeTableState.onAddButtonClick(scope.row)">
              <el-icon color="#409eff">
                <circle-plus />
              </el-icon>
            </span>
            <span @click="AppMenuTreeTableState.onEditButtonClick(scope.row)">
              <el-icon color="#67c23a">
                <edit />
              </el-icon>
            </span>
            <span @click="AppMenuTreeTableState.onDeleteButtonClick(scope.row)">
              <el-icon color="#f56c6c">
                <delete />
              </el-icon>
            </span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <app-menu-form-dialog
      v-if="AppMenuTreeTableState.dialogVisible"
      v-model:visible="AppMenuTreeTableState.dialogVisible"
      :menu-id="AppMenuTreeTableState.currentMenuId"
      :parent-menu-id="AppMenuTreeTableState.currentParentMenuId"
      @save-success="AppMenuTreeTableState.onSaveSuccess"
    ></app-menu-form-dialog>
  </jxtech-basic-card>
</template>

<style scoped lang="scss">
.app-menu-tree-table-control {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;

  > span {
    display: inline-block;
    height: 18px;
    cursor: pointer;
  }
  > span:nth-child(2) {
    margin: 0 16px;
  }
}
</style>
